:root {
  --size-xs: 24rpx;
  --size-sm: 28rpx;
  --size-md: 32rpx;
  --size-lg: 36rpx;
  --size-xl: 40rpx;
  --color-white:#ffffff;
  --color-back:#000000;
  --color-dark-gray:#333333;
  --color-light-gray:#858587;
  --color-silvery:#555555;
  --color-gray:#999999;
  --color-blue:#3780FF;
  --color-red:#FF3737;
  --color-yellow:#FAE268;
  --color-gray-white: #F7F7F7;
}


/* flex布局 */
.flex{
	display: flex;
}
.justify-content-space-between{
	justify-content: space-between;
}
.justify-content-space-around{
	justify-content:space-around;
}
.justify-content-center{
	justify-content:center;
}
.justify-content-end{
	justify-content:flex-end;
}
.justify-content-start{
	justify-content:flex-start;
}
.align-items-center{
	align-items: center;
}
.align-items-flex-start{
	align-items: flex-start;
}
.align-items-flex-end{
	align-items: flex-end;
}
.flex-wrap{
	flex-wrap: wrap;
}
.flex-nowrap{
	flex-wrap: nowrap;
}
.gap-xs{
	gap:var(--size-xs); 
}
.gap-sm{
	gap:var(--size-sm); 
}
.gap-md{
	gap:var(--size-md);
}
.gap-lg{
	gap:var(--size-lg);
}
.gap-xl{
	gap:var(--size-xl);
}
.gap-top-bottom-xs{
	gap:var(--size-xs) 0; 
}
.gap-top-bottom-sm{
	gap:var(--size-sm) 0; 
}
.gap-top-bottom-md{
	gap:var(--size-md) 0;
}
.gap-top-bottom-lg{
	gap:var(--size-lg) 0;
}
.gap-top-bottom-xl{
	gap:var(--size-xl) 0;
}
.gap-left-right-xs{
	gap:0 var(--size-xs); 
}
.gap-left-right-sm{
	gap:0 var(--size-sm); 
}
.gap-left-right-md{
	gap:0 var(--size-md);
}
.gap-left-right-lg{
	gap:0 var(--size-lg);
}
.gap-left-right-xl{
	gap:0 var(--size-xl);
}


/* 宽度 */
.width-xs{
	width: var(--size-xs);
}
.width-sm{
	width: var(--size-sm);
}
.width-md{
	width: var(--size-md);
}
.width-lg{
	width: var(--size-lg);
}
.width-xl{
	width: var(--size-xl);
}

/* 字体布局 */
.font-size-xs{
	font-size: var(--size-xs);
}
.font-size-sm{
	font-size: var(--size-sm);
}
.font-size-md{
	font-size: var(--size-md);
}
.font-size-lg{
	font-size: var(--size-lg);
}
.font-size-xl{
	font-size: var(--size-xl);
}
.font-weight{
	font-weight: bold;
}
.color-white{
	color: var(--color-white);
}
.color-back{
	color: var(--color-back);
}
.color-dark-gray{
	color: var(--color-dark-gray);
}
.color-light-gray{
	color: var(--color-light-gray);
}
.color-silvery{
	color: var(--color-silvery);
}
.color-gray{
	color: var(--color-gray);
}
.color-blue{
	color: var(--color-blue);
}
.color-red{
	color: var(--color-red);
}
.color-yellow{
	color: var(--color-yellow);
}
.color-gray-white{
	color:var(--color-gray-white)
}
.text-align-center{
	text-align: center;
}
.text-align-right{
	text-align: right;
}


/* 边距 */
.padding-xs{
	padding:var(--size-xs); 
}
.padding-sm{
	padding:var(--size-sm); 
}
.padding-md{
	padding:var(--size-md);
}
.padding-lg{
	padding:var(--size-lg);
}
.padding-xl{
	padding:var(--size-xl);
}

.padding-left-xs{
	padding-left:var(--size-xs); 
}
.padding-left-sm{
	padding-left:var(--size-sm); 
}
.padding-left-md{
	padding-left:var(--size-md);
}
.padding-left-lg{
	padding-left:var(--size-lg);
}
.padding-left-xl{
	padding-left:var(--size-xl);
}

.padding-right-xs{
	padding-right:var(--size-xs); 
}
.padding-right-sm{
	padding-right:var(--size-sm); 
}
.padding-right-md{
	padding-right:var(--size-md);
}
.padding-right-lg{
	padding-right:var(--size-lg);
}
.padding-right-xl{
	padding-right:var(--size-xl);
}

.padding-top-xs{
	padding-top:var(--size-xs); 
}
.padding-top-sm{
	padding-top:var(--size-sm); 
}
.padding-top-md{
	padding-top:var(--size-md);
}
.padding-top-lg{
	padding-top:var(--size-lg);
}
.padding-top-xl{
	padding-top:var(--size-xl);
}

.padding-bottom-xs{
	padding-bottom:var(--size-xs); 
}
.padding-bottom-sm{
	padding-bottom:var(--size-sm); 
}
.padding-bottom-md{
	padding-bottom:var(--size-md);
}
.padding-bottom-lg{
	padding-bottom:var(--size-lg);
}
.padding-bottom-xl{
	padding-bottom:var(--size-xl);
}

.margin-auto{
	margin:0 auto; 
}
.margin-auto-xs{
	margin:var(--size-xs) auto; 
}
.margin-auto-sm{
	margin:var(--size-sm) auto; 
}
.margin-auto-md{
	margin:var(--size-md) auto;
}
.margin-auto-lg{
	margin:var(--size-lg) auto;
}
.margin-auto-xl{
	margin:var(--size-xl) auto;
}

.margin-xs{
	margin:var(--size-xs); 
}
.margin-sm{
	margin:var(--size-sm); 
}
.margin-md{
	margin:var(--size-md);
}
.margin-lg{
	margin:var(--size-lg);
}
.margin-xl{
	margin:var(--size-xl);
}

.margin-left-xs{
	margin-left:var(--size-xs); 
}
.margin-left-sm{
	margin-left:var(--size-sm); 
}
.margin-left-md{
	margin-left:var(--size-md);
}
.margin-left-lg{
	margin-left:var(--size-lg);
}
.margin-left-xl{
	margin-left:var(--size-xl);
}

.margin-right-xs{
	margin-right:var(--size-xs); 
}
.margin-right-sm{
	margin-right:var(--size-sm); 
}
.margin-right-md{
	margin-right:var(--size-md);
}
.margin-right-lg{
	margin-right:var(--size-lg);
}
.margin-right-xl{
	margin-right:var(--size-xl);
}

.margin-top-xs{
	margin-top:var(--size-xs); 
}
.margin-top-sm{
	margin-top:var(--size-sm); 
}
.margin-top-md{
	margin-top:var(--size-md);
}
.margin-top-lg{
	margin-top:var(--size-lg);
}
.margin-top-xl{
	margin-top:var(--size-xl);
}

.margin-bottom-xs{
	margin-bottom:var(--size-xs); 
}
.margin-bottom-sm{
	margin-bottom:var(--size-sm); 
}
.margin-bottom-md{
	margin-bottom:var(--size-md);
}
.margin-bottom-lg{
	margin-bottom:var(--size-lg);
}
.margin-bottom-xl{
	margin-bottom:var(--size-xl);
}

/* 定位 */
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.fixed{
	position: fixed;
}
.sticky{
	position: sticky;
}

/* 圆角 */
.border-radius-xs{
	border-radius:var(--size-xs); 
}
.border-radius-sm{
	border-radius:var(--size-sm); 
}
.border-radius-md{
	border-radius:var(--size-md);
}
.border-radius-lg{
	border-radius:var(--size-lg);
}
.border-radius-xl{
	border-radius:var(--size-xl);
}

.border-radius-top-right-xs{
	border-top-right-radius:var(--size-xs); 
}
.border-radius-top-right-sm{
	border-top-right-radius:var(--size-sm); 
}
.border-radius-top-right-md{
	border-top-right-radius:var(--size-md);
}
.border-radius-top-right-lg{
	border-top-right-radius:var(--size-lg);
}
.border-radius-top-right-xl{
	border-top-right-radius:var(--size-xl);
}

.border-radius-top-left-xs{
	border-top-left-radius:var(--size-xs); 
}
.border-radius-top-left-sm{
	border-top-left-radius:var(--size-sm); 
}
.border-radius-top-left-md{
	border-top-left-radius:var(--size-md);
}
.border-radius-top-left-lg{
	border-top-left-radius:var(--size-lg);
}
.border-radius-top-left-xl{
	border-top-left-radius:var(--size-xl);
}

.border-radius-bottom-right-xs{
	border-bottom-right-radius:var(--size-xs); 
}
.border-radius-bottom-right-sm{
	border-bottom-right-radius:var(--size-sm); 
}
.border-radius-bottom-right-md{
	border-bottom-right-radius:var(--size-md);
}
.border-radius-bottom-right-lg{
	border-bottom-right-radius:var(--size-lg);
}
.border-radius-bottom-right-xl{
	border-bottom-right-radius:var(--size-xl);
}

.border-radius-bottom-left-xs{
	border-bottom-left-radius:var(--size-xs); 
}
.border-radius-bottom-left-sm{
	border-bottom-left-radius:var(--size-sm); 
}
.border-radius-bottom-left-md{
	border-bottom-left-radius:var(--size-md);
}
.border-radius-bottom-left-lg{
	border-bottom-left-radius:var(--size-lg);
}
.border-radius-bottom-left-xl{
	border-bottom-left-radius:var(--size-xl);
}

/* 超出隐藏 */
.overflow-hidden{
	overflow: hidden;
}

/* 块元素 */
.display-block{
	display: block;
}
.display-inline-block{
	display: inline-block;
}

/* 背景色 */
.bgcolor-white{
	background-color: var(--color-white);
}
.bgcolor-back{
	background-color: var(--color-back);
}
.bgcolor-dark-gray{
	background-color: var(--color-dark-gray);
}
.bgcolor-light-gray{
	background-color: var(--color-light-gray);
}
.bgcolor-silvery{
	background-color: var(--color-silvery);
}
.bgcolor-gray{
	background-color: var(--color-gray);
}
.bgcolor-blue{
	background-color: var(--color-blue);
}
.bgcolor-red{
	background-color: var(--color-red);
}
.bgcolor-yellow{
	background-color: var(--color-yellow);
}
.bgcolor-gray-white{
	background-color:var(--color-gray-white)
}

/* 背景色透明 */
.bgcolor-white-op{
	background-color: rgba(255, 255, 255, 0.1);
}
.bgcolor-back-op{
	background-color: rgba(0, 0, 0, 0.1);
}
.bgcolor-dark-gray-op{
	background-color: rgba(51, 51, 51, 0.1);
}
.bgcolor-light-gray-op{
	background-color: rgba(133, 133, 133, 0.1);
}
.bgcolor-silvery-op{
	background-color: rgba(85, 85, 85, 0.1);
}
.bgcolor-gray-op{
	background-color: rgba(153, 153, 153, 0.1);
}
.bgcolor-blue-op{
	background-color: rgba(55, 128, 255, 0.1);
}
.bgcolor-red-op{
	background-color: rgba(255, 55, 55, 0.1);
}
.bgcolor-yellow-op{
	background-color: rgba(250, 226, 104, 0.1);
}
.bgcolor-gray-white-op{
	background-color: rgba(247, 247, 247, 0.1);
}

.border-box{
	box-sizing: border-box;
}

.border-white{
	border:1px solid var(--color-white);
}
.border-back{
	border:1px solid var(--color-back);
}
.border-dark-gray{
	border:1px solid var(--color-dark-gray);
}
.border-light-gray{
	border:1px solid var(--color-light-gray);
}
.border-silvery{
	border:1px solid var(--color-silvery);
}
.border-gray{
	border:1px solid var(--color-gray);
}
.border-blue{
	border:1px solid var(--color-blue);
}
.border-red{
	border:1px solid var(--color-red);
}
.border-yellow{
	border:1px solid var(--color-yellow);
}
.border-gray-white{
	border:1px solid var(--color-gray-white)
}